<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money base-flex">
						<div class="money-li" v-for="(item, index) in orderMoney" :key="index">
							<div class="title">{{ item.title }}</div>
							<div class="num">{{ item.num }}</div>
							<div class="money-li__icon" v-if="item.tips">
								<el-tooltip effect="dark" :content="item.tips" placement="top">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template #slot-top-mask>
				<div class="mask"></div>
			</template>
			<template #slot-datepicker>
				<date-picker
					style="margin-left:10px"
					@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
					@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
				></date-picker>
				<el-button @click="orderExport" type="primary" style="margin-left:10px" size="mini">
					<i class="el-icon-download"></i>导出报表
				</el-button>
			</template>
			<template #table-column-date="{ scope }">
				<span>{{ scope.row.date | dateFormatSlash }}</span>
			</template>
			<template #table-column-orderTransform="{ scope }">
				<span>{{ Number(scope.row.orderTransform).toFixed(2) * 100 + '%' }}</span>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';
import { dateFormat, download } from '@/utils/index';
export default {
	data() {
		return {
			crud: null,
			orderMoney: [
				{
					title: '新增用户数',
					num: 0,
					tips: '统计时间内所有新增访客（已授权）'
				},
				{
					title: '总用户',
					num: 0,
					tips: ''
				},
				{
					title: 'PV',
					num: 0,
					tips: '统计时间内所有访客（已授权+未授权）使用量'
				},
				{
					title: 'UV',
					num: 0,
					tips: '统计时间内所有访客（已授权+未授权）之和'
				},
				{
					title: '有效订单',
					num: 0,
					tips: '统计时间内有效付款（付款+结算）订单之和'
				},
				{
					title: '失效订单',
					num: 0,
					tips: '统计时间内失效的订单之和'
				},
				{
					title: '预估佣金',
					num: 0,
					tips: '统计时间内付款订单有效佣金之和'
				},
				{
					title: '预估结算佣金',
					num: 0,
					tips: '统计时间内预估结算的佣金之和'
				},
				{
					title: '失效佣金',
					num: 0,
					tips: '统计时间内失效的佣金之和'
				},
				{
					title: '京礼金消耗',
					num: 0,
					tips: '用户已使用的京礼金金额之和'
				},
				{
					title: '实得收入预估',
					num: 0,
					tips: '（今日预估结算佣金*（1-10%）  -结算订单礼金消耗）*分成比例'
				},
				{
					title: '下单转换率',
					num: 0,
					tips: '有效订单数/授权UV （统计到小数点后两位）'
				},
				{
					title: '单产',
					num: 0,
					tips: '预估佣金收入/授权UV（统计到小数点后四位）'
				}
			],
			params: {}
		};
	},
	components: {
		DatePicker
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.jljWechatReport)
				.set('dict', {
					api: {
						page: 'report'
					}
				})
				.set('table', {
					columns: [
						{
							label: '日期',
							prop: 'date',
							align: 'center',
							width: 150
						},
						{
							label: '渠道名称',
							prop: 'channelName',
							align: 'center'
						},
						{
							label: '渠道ID',
							prop: 'channelId',
							align: 'center'
						},
						{
							label: '新增用户',
							prop: 'newUserNum',
							align: 'center'
						},
						{
							label: '总用户',
							prop: 'userTotal',
							align: 'center'
						},
						{
							label: 'PV',
							prop: 'PV',
							align: 'center'
						},
						{
							label: 'UV',
							prop: 'UV',
							align: 'center'
						},
						{
							label: '有效订单',
							prop: 'validOrderNum',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '失效订单',
							prop: 'invalidOrderNum',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '预估佣金',
							prop: 'validCommissionTotal',
							align: 'center'
						},
						{
							label: '预估结算佣金',
							prop: 'settleCommissionTotal',
							align: 'center',
							sortable: 'custom',
							width: '150px'
						},
						{
							label: '礼金消耗',
							prop: 'tljMoney',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '实得收入预估',
							prop: 'incomeMoney',
							align: 'center'
						},
						{
							label: '失效佣金',
							prop: 'invalidCommission',
							align: 'center'
						},
						{
							label: '下单转换率',
							prop: 'orderTransform',
							align: 'center'
						},
						{
							label: '单产',
							prop: 'singleYield',
							align: 'center'
						}
					],

					op: {
						visible: false
					}
					// props: {
					// 'default-sort': {
					// 	prop: 'orderCreateTime',
					// 	order: 'descending'
					// }
					// }
				})

				.set('layout', [
					['slot-top-stats'],
					['slot-top-mask'],
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					const { list, subData } = await next({ ...params });
					// list.map(e => {
					// 	e.date = moment(Number(e.date)).format('YYYY-MM-DD')
					// });
					console.log(list);
					this.orderMoney[0].num = subData.newUserNum || 0;
					this.orderMoney[1].num = subData.userTotal || 0;
					this.orderMoney[2].num = subData.PV || 0;
					this.orderMoney[3].num = subData.UV || 0;
					this.orderMoney[4].num = subData.validOrderNum || 0;
					this.orderMoney[5].num = subData.invalidOrderNum || 0;
					this.orderMoney[6].num = '￥' + (subData.validCommissionTotal || 0);
					this.orderMoney[7].num = '￥' + (subData.settleCommissionTotal || 0);
					this.orderMoney[8].num = subData.invalidCommission || 0;
					this.orderMoney[9].num = subData.tljMoney || 0;
					this.orderMoney[10].num = subData.incomeMoney || 0;
					this.orderMoney[11].num = (Number(subData.orderTransform) * 100 || 0).toFixed(5) + '%';
					this.orderMoney[12].num = '￥' + (subData.singleYield || 0);
				})
				.done();

			app.refresh({
				page: 1,
				size: 20,
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		orderExport() {
			this.$service.goodsMenagement.jljWechatReport.reportExcel(this.params).then(res => {
				download({
					data: res,
					fileName: `微信小程序渠道数据-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.number {
	width: 100%;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-between;
		.money-li {
			text-align: center;
			position: relative;
			.money-li-child {
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 15px;
				}
				margin-top: 18px;
			}
			.money-li__icon {
				color: $text-grey;
				font-size: 14px;
				position: absolute;
				top: 0;
				right: -20px;
			}
			.money-li-child div:first-child {
				margin-right: 30px;
			}
			.title {
				color: $text-grey;
				font-size: $font12;
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
.mask {
	width: 100%;
	height: 10px;
	background: $bg-grey;
}
.Filter {
	margin-right: 10px;
	.title {
		margin-right: 10px;
		font-size: $font14;
		color: #666;
	}
}
.tips {
	color: #f14d27;
}
</style>

<style lang="stylus" scoped>
// 格式化crud
.cl-crud {
	padding: 0;

	>>>.el-row.el-row--2 {
		padding: 0 10px;
	}

	>>>.crud-data-table {
		padding: 0 10px;
	}

	>>>.el-row:last-child {
		padding: 0 10px;
	}
}
</style>
